<template>
	<view>
		<view class="flex-col page">
			<!-- 标题 -->
			<u-navbar :background="background" title="添加成员" title-color="#000000" title-size="36"
				:title-bold="true"></u-navbar>
			<view class="flex-col items-center">
				
				<!-- 头像 -->
				<view class="flex-col relative">
					<image class="image-avatar" src="/static/add_child_avatar.png" />
					<image class="image_7" src="/static/add_child_upload.png" />
				</view>
				<!-- 表单内容 -->
				<view class="form flex-col items-center">
					<view class="flex-col group_3">
						<text class="self-start font_3 text_3">昵称</text>
						<view class="flex-col justify-start items-center input text-wrapper_2 mt-9-5">
							<input placeholder="请输入昵称" class="nickname-input" placeholder-class="nickname-placeholder"
								v-model="nickname" />
						</view>
					</view>
					<view class="flex-col self-stretch group_4">
						<text class="self-start font_3 text_4">生日</text>
						<view class="mt-10 flex-row justify-center items-center self-stretch relative section_3"
							@click="openBirthPicker">
							<!-- <u-picker v-model="birthShow" mode="time"></u-picker> -->
							<u-picker mode="time" v-model="birthShow" :params="params"
								@confirm="confirmBirth"></u-picker>
							<text class="font_4 text_5">{{birth}}</text>
							<image class="image_8 pos_7"
								src="/static/add_child_piker_arrow_down.png" />
						</view>
					</view>
					<text class="self-start font_3 text_6">性别</text>
					<!-- <text class="self-start font_3 text_7">兴趣爱好</text>
					<view class="flex-col justify-start items-center text-wrapper_3">
						<input placeholder="请输入兴趣爱好" class="nickname-input" placeholder-class="nickname-placeholder"
							v-model="nickname" />
					</view> -->
				</view>

			</view>
			<!-- <view class="flex-col justify-start items-center button text-wrapper_4 mt-49">
				
			</view> -->
			<view class="flex-row justify-center mt-49">
				<image src="/static/add_child_submitbutton.png" class="submit-button" mode=""></image>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				nickname: '',
				birthShow: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				birth:'2019-10-22',
				sexList: [
					{
						title: '男生',
						icon: '/static/add_child_boy.png'
					},
					{
						title: '女生',
						icon: '/static/add_child_girl.png'
					}
				],
				sex: 0,//0男生1女生
			}
		},

		onShow() {

		},
		methods: {
			openBirthPicker() {
				this.birthShow = true
			},
			confirmBirth(e) {
				console.log(e, 'eeeeee')
				this.birth = e.year + '-' + e.month + '-' + e.day
			},
			// 切换性别
			changeSex(index){
				this.sex = index
			}
		}
	}
</script>

<style>
	@import url('../../common/css/common.css');

	.mt-95-5 {
		margin-top: 191rpx;
	}

	.mt-9-5 {
		margin-top: 19rpx;
	}

	.mt-4-5 {
		margin-top: 9rpx;
	}

	.mt-49 {
		margin-top: 98rpx;
	}
	page {
		background-color: #E0ECF6;
	}

	.page {
		padding-bottom: 39rpx;
		/* background-color: #ffffff; */
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		background-image: url(../../static/add_child_top_bg.png);
		background-size: 100% 410rpx;
		background-repeat: no-repeat;
	}

	.group {
		padding-bottom: 7rpx;
		width: 650rpx;
		margin: 0 auto;
		margin-top: 28rpx;
	}

	.section {
		padding: 94rpx 21rpx 0;
		background-image: url('https://ide.code.fun/api/image?token=669493cab8c7cd0011a5d042&name=c844dba2fe49ebf029d2b63f7c3a04bc.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 465rpx;
	}

	.image_hi {
		width: 146rpx;
		height: 56rpx;
		margin-bottom: 34rpx;
	}

	.nickname-input {
		text-align: center;
	}

	.section_2 {
		padding: 14rpx 27rpx;
		background-color: #ffffffe6;
		border-radius: 32rpx;
	}

	.image_3 {
		width: 62rpx;
		height: 38rpx;
	}

	.image_4 {
		width: 35rpx;
		height: 35rpx;
	}

	.image_6 {
		margin-right: 42rpx;
		width: 172rpx;
		height: 62rpx;
	}

	.image {
		width: 402rpx;
		height: 409rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.text-wrapper {
		padding: 105rpx 0 92rpx;
		background-image: url('https://ide.code.fun/api/image?token=669493cab8c7cd0011a5d042&name=a50103b883bc52a1b95d32657fcadbc0.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 469rpx;
	}

	.pos_2 {
		position: absolute;
		left: 62rpx;
		top: 0;
	}

	.text {
		margin-right: 75rpx;
		color: #000000;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
	}

	.pos_5 {
		position: absolute;
		left: 49rpx;
		bottom: 153rpx;
	}

	.font {
		font-size: 60rpx;
		font-family: PingFang SC;
		line-height: 56rpx;
		font-weight: 500;
		color: #171832;
	}

	.text_2 {
		color: #171832;
		font-size: 60rpx;
		font-family: EmojiOne;
		line-height: 56rpx;
	}

	.group_2 {
		line-height: 32rpx;
		width: 395rpx;
	}

	.pos_6 {
		position: absolute;
		left: 44rpx;
		top: 295rpx;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #171832;
		font-weight: 500;
	}

	.image_5 {
		width: 194rpx;
		height: 225rpx;
	}

	.pos_4 {
		position: absolute;
		right: 60rpx;
		bottom: 28rpx;
	}

	.image_2 {
		width: 655rpx;
		height: 24rpx;
	}

	.pos_3 {
		position: absolute;
		right: 35rpx;
		top: 33rpx;
	}

	.image-wrapper {}

	.image-avatar {
		width: 171rpx;
		height: 172rpx;
		border-radius: 50%;
	}

	.image_7 {
		margin-left: 120rpx;
		width: 52rpx;
		height: 52rpx;
		position: absolute;
		bottom: 0;
	}

	.group_3 {
		margin-top: 26rpx;
		width: 654rpx;

		/* padding: 0 48rpx; */
	}

	.font_3 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		font-weight: 500;
		color: #616274;
	}

	.text_3 {
		margin-left: 17rpx;
	}

	.input {
		align-self: stretch;
	}

	.text-wrapper_2 {
		/* padding: 39rpx 0 34rpx; */
		padding: 34rpx 0;
		border-radius: 49rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #fff;
		/* background-image: url('https://ide.code.fun/api/image?token=669493cab8c7cd0011a5d042&name=40a41de92fd661b50375a0e897dd0773.png'); */
		/* background-size: 100% 100%;
		background-repeat: no-repeat; */
	}

	.font_4 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
		font-weight: 500;
		color: #171832;
	}

	.group_4 {
		margin-top: 35rpx;
		padding: 0 50rpx;
	}

	.text_4 {
		margin-left: 15rpx;
	}

	.section_3 {
		/* padding: 38rpx 34rpx; */
		padding: 34rpx 0;
		border-radius: 24rpx;
		/* background-image: url('https://ide.code.fun/api/image?token=669493cab8c7cd0011a5d042&name=b4d5ce12a695d85da0b34429fff5c459.png'); */
		width: 651rpx;
		height: 99rpx;
		background: #fff;
		
	}

	.text_5 {
		line-height: 24rpx;
	}

	.image_8 {
		width: 17rpx;
		height: 11rpx;
	}

	.pos_7 {
		position: absolute;
		right: 34rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.text_6 {
		margin-left: 65rpx;
		margin-top: 34rpx;
	}

	.equal-division {
		align-self: center;
		margin-top: 22rpx;
		width: 651rpx;
	}

	.image_9 {
		width: 112rpx;
		height: 112rpx;
		margin-top: 13rpx;
	}

	.section_4 {
		/* flex: 1 1 297rpx; */
	}

	.equal-division-item {
		/* padding: 12rpx 0 28rpx; */
		width: 297rpx;
		background: #fff;
		border-radius: 24rpx;
		height: 241rpx;
		/* border-left: solid 1rpx #eff4ff;
		border-right: solid 1rpx #eff4ff;
		border-top: solid 1rpx #eff4ff;
		border-bottom: solid 1rpx #eff4ff; */
	}
	

	.text_7 {
		margin-left: 65rpx;
		margin-top: 33rpx;
		line-height: 26rpx;
	}

	.text-wrapper_3 {
		margin: 23rpx 0 100rpx 0;
		padding: 34rpx 0;
		border-radius: 24rpx;
		/* background-image: url('https://ide.code.fun/api/image?token=669493cab8c7cd0011a5d042&name=ee30b1d23a7174f06abced713b6ddba4.png');
		background-size: 100% 100%;
		background-repeat: no-repeat; */
		width: 651rpx;
		height: 99rpx;
		background: linear-gradient(90deg, #ecf7fd, #faf7fe);
	}

	.text_8 {
		line-height: 32rpx;
	}

	.button {
		margin: 0 28rpx;
	}

	.text-wrapper_4 {
		padding: 32rpx 0;
		border-radius: 44rpx;
		background: linear-gradient(90deg, #b8e2ff, #bfbdff);
		/* background-image: url('https://ide.code.fun/api/image?token=669493cab8c7cd0011a5d042&name=7b25aaee48ad626d06f87f71558b7c8f.png'); */
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.text_9 {
		color: #151515;
		line-height: 29rpx;
	}
	.submit-button {
		width: 524rpx;
		height: 134rpx;
	}
</style>